<script setup>
const user=null;
    const carousels=['../assets/carousel0.jpg',
        '../assets/carousel1.jpg',
        '../assets/carousel2.jpg',
        '../assets/carousel3.jpg'];
      const postList=[
           {title:"vue3.0 新特性使用攻略",date:'2024-10-28'},
           {title:"vit脚手架使用详解",date:'2024-10-25'},
           {title:"ElementPlus框架应用场景",date:'2024-10-17'},
           {title:"5款独立开发者必备神器",date:'2024-10-12'},
    ];
  const  post=[
           {title:"0基础学javas",mony:'¥59'},
           {title:"vue.js从入门到实战",mony:'¥199'},
           {title:"深入浅出状态管理",mony:'¥29'},
           {title:"说透大厂前端项目场景面试",mony:'¥69'},
    ];
</script>
<template>
            <el-container style=" background-color: #f5f5f5;">       
                <el-main class="main">
                    <el-carousel height="400px">
                        <el-carousel-item v-for="(item,i) in carousels" :key="i">
                            <img v-bind:src="item" width="100%" height="100%">
                        </el-carousel-item> 
                        
                      </el-carousel>
                      <el-row style="position: relative; top: 30px;">
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门文章</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <ul>
                                <li v-for=" (post,i) in postList" :key="i" style="line-height: 15px;">
                                    <p>{{post.title}}</p>
                                    <el-text size="small" type="success" >{{post.date}}</el-text>
                                </li>
                            </ul>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门课程</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <ul>
                                <li v-for=" (po,i) in post" :key="i" style="line-height: 15px;">
                                    <p>{{po.title}}</p>
                                    <el-text size="small" type="success">{{po.mony}}</el-text>
                                </li>
                            </ul>

                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门商品</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <el-carousel height="200px">
                                <el-carousel-item v-for="(item,i) in carousels" :key="i">
                                    <img v-bind:src="item" width="100%" height="100%"
                                    style="padding: 20px;">
                                </el-carousel-item>  
                              </el-carousel>

                        </el-col>
                      </el-row>
                </el-main>
                
            </el-container>
</template>
<style scoped>
  .main{
        width: 1200px;
        margin: 0 auto;
       
        background-color: white;  
    }
    ul{
        list-style: none;
    }
    
</style>